<template>
	<div class="tool-title-box">
		<h3>输入框设置</h3>
		<div class="operation-box">
			<div class="item-box">
				<div class="title">标签名称</div>
				<div class="modify-box">
					<el-input placeholder="请输入标签名称" clearable v-model="activeComponent.data.labelValue"></el-input>
				</div>
			</div>
			<div class="item-box">
				<div class="title">属性名称</div>
				<div class="modify-box">
					<el-input placeholder="请输入属性名称" clearable v-model="activeComponent.data.name"></el-input>
				</div>
			</div>
			<div class="item-box">
				<div class="title">默认值</div>
				<div class="modify-box">
					<el-input placeholder="请输入默认值" clearable v-model="activeComponent.data.modelValue"></el-input>
				</div>
			</div>
			<div class="item-box">
				<div class="title">占位文本</div>
				<div class="modify-box">
					<el-input placeholder="请输入占位文本" clearable v-model="activeComponent.data.placeholder"></el-input>
				</div>
			</div>
			<div class="item-box">
				<div class="title">组件类型</div>
				<div class="modify-box">
					<el-select v-model="activeComponent.data.type" placeholder="请选择">
						<el-option label="text" value="text"></el-option>
						<el-option label="textarea" value="textarea"></el-option>
						<el-option label="number" value="number"></el-option>
					</el-select>
				</div>
			</div>
			<div class="item-box">
				<div class="title">组件大小</div>
				<div class="modify-box">
					<el-select v-model="activeComponent.data.size" placeholder="请选择">
						<el-option label="large" value="large"></el-option>
						<el-option label="medium" value="medium"></el-option>
						<el-option label="small" value="small"></el-option>
						<el-option label="mini" value="mini"></el-option>
					</el-select>
				</div>
			</div>
			<div class="item-box">
				<div class="title">标签宽度</div>
				<div class="modify-box">
					<el-input-number :min="1" :max="24" v-model="activeComponent.data.labelWidth"></el-input-number>
				</div>
			</div>
			<div class="item-box">
				<div class="title">最大长度</div>
				<div class="modify-box">
					<el-input-number v-model="activeComponent.data.maxlength" placeholder="max"></el-input-number>
				</div>
			</div>
			<div class="item-box">
				<div class="title">最小长度</div>
				<div class="modify-box">
					<el-input-number v-model="activeComponent.data.minlength" placeholder="min"></el-input-number>
				</div>
			</div>
			<div class="item-box">
				<div class="title">输入框行数</div>
				<div class="modify-box">
					<el-input-number :min="1" v-model="activeComponent.data.rows" placeholder="输入框行数"></el-input-number>
				</div>
			</div>
			<div class="item-box">
				<div class="title">字数统计</div>
				<div class="modify-box">
					<el-switch v-model="activeComponent.data.showWordLimit" active-text="是" inactive-text="否"/>
				</div>
			</div>
			<div class="item-box">
				<div class="title">可清空</div>
				<div class="modify-box">
					<el-switch v-model="activeComponent.data.clearable" active-text="是" inactive-text="否"/>
				</div>
			</div>
			<div class="item-box">
				<div class="title">密码图标</div>
				<div class="modify-box">
					<el-switch v-model="activeComponent.data.showPassword" active-text="是" inactive-text="否"/>
				</div>
			</div>
			<div class="item-box">
				<div class="title">是否必填</div>
				<div class="modify-box">
					<el-switch v-model="activeComponent.data.required" active-text="是" inactive-text="否"/>
				</div>
			</div>
			<div class="item-box">
				<div class="title">是否禁用</div>
				<div class="modify-box">
					<el-switch v-model="activeComponent.data.disabled" active-text="是" inactive-text="否"/>
				</div>
			</div>
			<div class="item-box">
				<div class="title">是否只读</div>
				<div class="modify-box">
					<el-switch v-model="activeComponent.data.readonly" active-text="是" inactive-text="否"/>
				</div>
			</div>
			<div class="item-box">
				<div class="title">高度自适应</div>
				<div class="modify-box">
					<el-switch v-model="activeComponent.data.autosize" active-text="是" inactive-text="否"/>
				</div>
			</div>
		</div>
	</div>
</template>

<script lang="ts">
	import { toRefs, reactive, computed } from 'vue';
	import { useStore } from '/@/store/index';
	
	export default {
		name: 'pencil-tool',
		components: { },
		setup() {
			const store = useStore();
			const state = reactive({
				
			})
			state.terminal = computed(() => store.state.decorator.terminal);
			state.activeComponent = computed(() => store.state.decorator.activeComponent);
			
			return {
				...toRefs(state),
			};
		},
	}
</script>

<style lang="scss" scoped>
@import './scss/index.scss';
</style>